<template>
  <div id="ad">
    <van-row type="flex" gutter="10">
      <van-col span="16">
        <img
          class="links-top-left"
          :src="`${baseURL}/jd_card/index/advert3/${adverts[0].images}`"
          alt=""
          @click="goUrl(adverts[0].url)"
        />
      </van-col>
      <van-col span="8">
        <img
          class="links-top-right"
          :src="`${baseURL}/jd_card/index/advert3/${adverts[1].images}`"
          alt=""
          @click="goUrl(adverts[1].url)"
        />
      </van-col>
    </van-row>
    <van-row gutter="10">
      <van-col v-for="(item, i) of stored4" :key="i" span="8">
        <img
          class="links-bottom"
          :src="`${baseURL}/jd_card/index/stored4/${item.images}`"
          alt=""
          @click="goUrl(item.url)"
        />
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      adverts: {
        0: {
          images: "advert-1.jpg",
          url: "#",
        },
        1: {
          images: "advert-2.jpg",
          url: "#",
        },
      },
      stored4: {
        0: {
          images: "stored-1.jpg",
          url: "#",
        },
        1: {
          images: "stored-2.jpg",
          url: "#",
        },
        2: {
          images: "stored-3.jpg",
          url: "#",
        },
      },
    };
  },
  methods: {
    goUrl(herf) {
      this.$router.push(`/${herf}`);
    },
  },
};
</script>
<style lang="scss" scoped>
#ad {
  padding: 0.625rem;
  background-color: #f5f5f5;
  .van-col {
    img {
      display: block;
      width: 100%;
    }
    .links-bottom {
      margin-top: 0.625rem;
    }
  }
}
</style>
